<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAppStore } from '../stores/app'

const appStore = useAppStore()
const message = ref('欢迎使用MVP快速原型开发框架')
const apiStatus = ref('检查中...')

onMounted(async () => {
  try {
    const response = await fetch('/api/health')
    const data = await response.json()
    apiStatus.value = data.status === 'ok' ? '后端API连接正常' : '后端API连接异常'
  } catch (error) {
    apiStatus.value = '后端API连接失败'
    console.error('API连接错误:', error)
  }
})
</script>

<template>
  <main class="p-4">
    <div class="card p-4 m-auto mt-4" style="max-width: 800px">
      <h1 class="text-center text-primary text-4xl mb-4">{{ message }}</h1>
      <div class="text-center mb-4">
        <p>环境: {{ appStore.appMode }}</p>
        <p>API状态: {{ apiStatus }}</p>
      </div>
      <div class="flex justify-content-center">
        <router-link to="/about">
          <button class="p-button p-component">关于</button>
        </router-link>
      </div>
    </div>
  </main>
</template>